<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>导航</title>
    <link rel="stylesheet" href="../css/topStyle.css" type="text/css "/>
    <link rel="stylesheet" href="../../../test/font/css/font-awesome.min.css" type="text/css"/>
</head>
<body>
<div id="menu2" class="menu">
    <ul>
        <li><a href="../index.html">首　　页</a></li>
        <li><a href="../page/tuijianzhinan.html">推荐指南</a></li>
        <li><a href="../page/product1.html">产品列表</a></li>
        <li><a href="../page/person.html">个人中心</a></li>
        <li><a href="Aboutus.html">关于我们</a></li>
        <li><a href="../page/connect.html">联系我们</a></li>

    </ul>
</div>
<script type="text/javascript" src="../js/top.js"></script>
<script type="text/javascript" src="../js/jquery.topmin.js"></script>
<script language="javascript">
    $(document).ready(function() {

        /*	2nd example	*/

        $("#menu2 li a").wrapInner( '<span class="out"></span>' );

        $("#menu2 li a").each(function() {
            $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
        });

        $("#menu2 li a").hover(function() {
            $(".out",	this).stop().animate({'top':	'60px'},	300); // move down - hide
            $(".over",	this).stop().animate({'top':	'0px'},		300); // move down - show

        }, function() {
            $(".out",	this).stop().animate({'top':	'0px'},		300); // move up - show
            $(".over",	this).stop().animate({'top':	'-60px'},	300); // move up - hide
        });

    });

</script>

</body>
</html>